<template>
	<view>
		<u-scroll-list class="scrollList" indicatorStyle="margin-top: 0;">
			<view class="procedureList">

				<view class="procedure x-f" v-for="(item,index) in procedures" :key="index">
					<m-progress-circle :progress="Number(item.value)" :canvasId="String(TheIndex)+String(index+1)"
						:radius="20" :trackColor="BackColor(item)" :innerTextColor="BackColor(item)"
						:progressColor="BackColor(item)" :lineWidth="2" :innerTextSize="12" :BottomTextSize="12"
						:Text="item.text" @click="handleCircleClick(item,index)">
					</m-progress-circle>

					<u-line v-if="index<(procedures.length-1)" :length="30" margin="-20px 4px 0"
						:hairline="false"></u-line>
				</view>
			</view>
		</u-scroll-list>
	</view>
</template>

<script lang="ts">
	import mProgressCircle from '@/st_ticket/components/m-progress-circle/m-progress-circle';

	export default {
		name: "procedure-step",
		components: {
			mProgressCircle
		},
		props: {
			procedures: {
				type: Array,
				default: []
			},
			TheIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {

			};
		},
		methods: {
			BackColor(data : any) { // 根据工艺路线状态，返回对应颜色
				let ModelColor = null;

				switch (data.FState) {
					case 0: // 未报工
						ModelColor = '#757575';
						break;
					case 1: // 已完成
						ModelColor = '#29c660';
						break;
					case -1: // 指定完成
						ModelColor = '#d0d30b';
						break;
					case 2: // 部分报工
						ModelColor = '#1f93e1';
						break;
					default:
						ModelColor = '#757575';
						break;
				}
				return ModelColor;
			},
			handleCircleClick(item : any, index : number) {
				// 在这里返回点击的环形图所带的内容和索引
				// console.log("Clicked on:", item, "at index:", index);
				// 触发父组件的自定义事件，并传递点击的内容和索引
				this.$emit('circle-clicked', item, index);
			}
		}
	}
</script>

<style lang="scss">
	.scrollList {
		background-color: #f9f9f9;
		padding: 3px 15px;
		border-radius: 15px;
	}

	.procedureList {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		// overflow-x: auto;
		white-space: nowrap;
		// width: 100%;
		height: 80px;
		position: relative;

		.u-line {
			border-bottom: 2px solid #d6d7d9 !important;
			border-radius: 99999px;
		}
	}
</style>